import { Modal, Button, Image } from '@douyinfe/semi-ui';
import { HISTORY_MODAL_ITEMS_COUNT } from '../constants';
import styles from '../index.module.scss';

/**
 * 历史文件模态框组件
 * @param {Object} props
 * @param {boolean} props.visible - 是否可见
 * @param {Function} props.onCancel - 取消回调
 * @param {Function} props.onConfirm - 确认回调
 */
function HistoryModal({ visible, onCancel, onConfirm }) {
  const handleCancel = () => {
    onCancel();
  };

  const handleConfirm = () => {
    onConfirm();
  };

  return (
    <Modal
      title="历史文件"
      closable={false}
      visible={visible}
      width={1216}
      height={792}
      centered
      className={styles.historyModal}
      footer={
        <div className={styles.historyModalButton}>
          <Button 
            onClick={handleCancel} 
            className={`${styles.button} button buttonDefault`}
          >
            取消
          </Button>
          <Button 
            onClick={handleConfirm}
            className={`${styles.button} button buttonPrimary`}
          >
            确认
          </Button>
        </div>
      }
    >
      <div className={styles.historyModalList}>
        {Array.from({ length: HISTORY_MODAL_ITEMS_COUNT }, (_, index) => (
          <div key={index} className={styles.historyModalItem}>
            <Image
              src={''}
              preview={false}
              className={styles.img}
              draggable={false}
            />
          </div>
        ))}
      </div>
    </Modal>
  );
}

export default HistoryModal;